<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-22 16:45:21
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <view :class="outerCls">
    {{ $slots.prefix }}
    <view v-if="$slots.prepend" class="arco-input-prepend">
      <slot name="prepend"></slot>
    </view>
    <view v-if="visible" :class="classNames">
      <text v-if="$slots.prefix" :class="`${prefixCls}-prefix`">
        <slot name="prefix"></slot>
      </text>
      <input
        ref="inputRef"
        :value="computedValue"
        :disabled="disabled"
        :type="type"
        :class="cls"
        :readonly="readonly"
        :maxlength="maxLength"
        :placeholder="placeholder"
        @input="handleInput"
      />
      <view
        v-if="showClearBtn"
        class="arco-icon-hover arco-input-icon-hover arco-input-clear-btn"
        @click="handleClose"
      >
        <svgIcon name="guanbi1"></svgIcon>
      </view>
      <view v-if="$slots.suffix || showWordLimit" class="arco-input-suffix">
        <slot name="suffix">
          <view class="arco-input-word-limit">{{
            valueLength + "/" + maxLength
          }}</view>
        </slot>
      </view>
    </view>
    <view v-if="$slots.append" class="arco-input-append">
      <slot name="append"></slot>
    </view>
  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref, toRefs } from "vue";
import svgIcon from "../arco-icon/index.vue";
import { isFunction } from "@/utils/is";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    svgIcon,
  },
  props: {
    modelValue: String,
    defaultValue: {
      type: String,
      default: "",
    },
    size: {
      type: String,
      default: "medium",
    },
    placeholder: {
      type: String,
      default: "",
    },
    allowClear: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    maxLength: {
      type: Number,
      default: -1,
    },
    type: {
      type: String,
      default: "text",
    },
    error: {
      type: Boolean,
      default: false,
    },
    showWordLimit: {
      type: Boolean,
      default: false,
    },
    wordLength: {
      type: Function,
    },
    wordSlice: {
      type: Function,
    },
  },
  emits: ["update:modelValue", "clear", "input"],
  setup(props, { emit, slots }) {
    const { size, disabled, error } = toRefs(props);
    const prefixCls = "arco-input";
    const visible = ref(true);
    const inputRef = ref();

    const _value = ref("");

    const computedValue = computed(() => {
      var _a;
      return (_a = props.modelValue) != null ? _a : _value.value;
    });

    const getValueLength = (value) => {
      var _a;
      if (isFunction(props.wordLength)) {
        return props.wordLength(value);
      }
      return (_a = value.length) != null ? _a : 0;
    };

    const valueLength = computed(() => getValueLength(computedValue.value));

    const showClearBtn = computed(
      () =>
        props.allowClear &&
        !props.readonly &&
        !disabled.value &&
        Boolean(computedValue.value),
    );

    const handleClose = () => {
      _value.value = "";
      emit("update:modelValue", "");
      emit("clear");
    };
    const classNames = computed(() => [
      `${prefixCls}-wrapper`,
      {
        [`${prefixCls}-error`]: error.value,
        [`${prefixCls}-disabled`]: disabled.value,
        // [`${prefixCls}-focus`]: focused.value,
      },
    ]);

    console.log(slots, "我怕你找不到");

    const outerCls = computed(() => [
      `${prefixCls}-outer`,
      {
        [`${prefixCls}-outer-has-suffix`]: Boolean(slots.suffix),
        [`${prefixCls}-outer-disabled`]: disabled.value,
      },
    ]);

    const updateValue = (value) => {
      _value.value = value;
      emit("update:modelValue", value);
    };

    const handleInput = (e) => {
      const { value } = e.detail;
      updateValue(value);
      emit("input", value);
    };

    const cls = computed(() => [prefixCls, `${prefixCls}-size-${size.value}`]);

    return {
      prefixCls,
      cls,
      inputRef,
      outerCls,
      classNames,
      visible,
      showClearBtn,
      handleClose,
      computedValue,
      handleInput,
      valueLength,
    };
  },
});
export default icon;
</script>
